<template>
  <div class="thePage">
    <div id="myMap" ref="myMap" class="myMap" v-loading="loading" element-loading-text="区域轮廓绘制中..." element-loading-background="rgba(9, 35, 109, 1)"></div>
    <!-- 信息窗口弹框 -->
    <popup ref="infoWindow" :curProject="curProject" :showPopup="showPopup" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

// import top from './components/top.vue';

import { getPorjectInfoAll } from '@/views/cockpit/api/bigscream';
import { getBottomDataApi } from '@/views/cockpit/api/map';
import { debounce } from '@/utils/index.js';
export default {
  name: 'myMap',
  components: {
    popup: () => import('./components/popup.vue')
  },
  data() {
    return {
      loading: false,
      chart: null,
      currIndex: 0,
      timeInterval: null,
      limitCenter: [],
      isMove: false,
      moveTimer: null,

      options: {},

      iconCategory: {
        1: require('@/views/cockpit/assets/category1.png'),
        2: require('@/views/cockpit/assets/category2.png')
      },
      curProject: {
        shortName: '项目简称1',
        amount: 10000,
        allFinish: 5000
        //项目其他信息
      },
      showPopup: false //显示信息窗口弹框
    };
  },

  computed: {},
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
    this.currIndex = 0;
    clearInterval(this.timeInterval);
    this.timeInterval = null;
  },
  methods: {
    initChart() {
      this.loading = true;
      // 初始化echart
      this.chart = echarts.init(this.$refs.myMap);

      echarts.registerMap('myMap', { geoJSON: require('./map.json') });
      this.initOptions();
      this.chart.setOption(this.options, true);

      // 鼠标点转地理坐标,测试用

      this.chart.getZr().on('click', params => {
        let pixelPoint = [params.offsetX, params.offsetY];
        let dataPoint = this.chart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
        console.log(dataPoint);
      });
      this.loading = false;
    },
    initOptions() {
      this.options = {
        tooltip: {
          show: true,
          padding: 0,
          position: (point, params, dom, rect, size) => {
            //console.log(point,dom,size.viewSize,size.contentSize)
            // 获取可视区域的宽度和高度
            const viewWidth = size.viewSize[0] - 10;
            const viewHeight = size.viewSize[1] - 10;

            // 获取提示框内容的宽度和高度
            const tooltipWidth = 180; //dom.offsetWidth;
            const tooltipHeight = 100; //dom.offsetHeight;

            // 设置提示框的位置
            let left = point[0];
            let top = point[1];

            // 判断提示框是否超出可视范围，如果超出则调整位置
            if (left + tooltipWidth > viewWidth) {
              left = viewWidth - tooltipWidth;
            }
            if (top + tooltipHeight > viewHeight) {
              top = viewHeight - tooltipHeight;
            }
            return [left, top];
          },
          formatter: params => {
            this.showInfoWindow(params);
            return this.$refs.infoWindow.$el;
          }
        },
        geo3D: {
          show:true,
          map: 'myMap',
          boxWidth: 100,
          boxHeight: 10,
          boxDepth: 'auto', //地图倾斜度 140
          regionHeight: 4, //地图高度
          selectedMode: 'single', // 地图高亮单选
          roam: true,

          label: {
            show: true,

            distance:1,
            fontSize: 14,
            color: '#ddd',
            zIndex: 1000
          },
          itemStyle: {
            color: 'rgba(3,123,83,0.3)',
            borderColor: '#00ce7d',
            borderWidth: 2
          },
          emphasis: {
            disabled:true,
            label: {
              color: '#fff',
              fontSize: 18
            },
            itemStyle: {
              color: 'rgba(3,123,83,1)',
              borderColor: '#00ce7d',
              borderWidth: 4
            }
          },

          light: {
            //主光源
            main: {
              color: '#fff',
              intensity: 1,
              shadow: true,
              alpha: 40
            }
          },
          shading: 'lambert', // color lambert realistic
          viewControl: {
            projection: 'orthographic', // perspective orthographic
            autoRotate: false,
            // damping: 0.8,
            rotateSensitivity: 1, // 旋转操作的灵敏度
            rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
            zoomSensitivity: 1, // 缩放操作的灵敏度
            panSensitivity: 1, // 平移操作的灵敏度
            // panMouseButton: 'right', // 平移操作使用的鼠标按键
            distance: 150, // 默认视角距离主体的距离
            center: [0, 0, 0],
            animation: true,
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut'
          },

        },

        series: [
          {
            type: 'scatter3D',
            name: 'project',
            coordinateSystem: 'geo3D',
            geoIndex: 0,
            symbolSize: 36,
            symbol: value => {
              console.log(value);
              return 'image://' + this.iconCategory[value[2]];
            },
            data: [[112.14638186037236, 33.438435043882976, 1], [112.20662822207449, 32.75689807712766, 2]],
            selectedMode: 'single',
            select: {
              // disabled: false  //可以被选中
              label: {
                show: true
              }
            },
            label: {
              show: false, //默认不显示
              // distance:5,
              position: [30, 30], // 绝对的像素值
              backgroundColor: {
                // image: this.iconBackground
              },
              shadowColor: 'rgba(148, 148, 148, 0.4)',
              shadowOffsetX: 0,
              shadowOffsetY: 8,
              shadowBlur: 30,
              width: 120,
              height: 80,
              formatter: params => {
                return '测试散点图: ' + JSON.stringify(params);
              }
            },
            tooltip: {}
          },

          {
            type: 'lines3D', //路径图
            coordinateSystem: 'geo3D',
            geoIndex: 0,
            selectedMode: 'single',
            polyline: true, // 是否是多段线。默认为 false
            zlevel: 101,
            data: [
              {
                coords: [
                  [111.54311693400685, 33.54738788184829],
                  [111.54311693400685, 33.45620527096792],
                  [111.55714502798844, 33.32995242513357],
                  [111.55714502798844, 33.32995242513357],
                  [111.61091938825122, 33.105502921428055],
                  [111.64598962320521, 32.9862641225845],
                  [111.64598962320521, 32.9862641225845],
                  [111.70444001479518, 32.80623691648737]
                ]
              }
            ],
            lineStyle: {
              // color: 'white',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#F5FF00' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00FF9D' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              width: 8,
              join: 'round', // round miter
              cap: 'round' //线段末端的绘制方式 square round
            },
            emphasis: {
              lineStyle: {
                color: 'red',
                width: 12
              }
            },
            effect: {
              show: true,
              symbol: 'arrow',
              symbolSize: 10,
              period: 6,
              trailLength: 0.5,
              color: '#1010ff',
              roundTrip: true
            },
            tooltip: {
              show: true,
              // position: ['50%', '50%'],
              padding: 0,
              formatter: params => {
                this.showInfoWindow(params);
                return this.$refs.infoWindow.$el;
              }
            }
          }
        ]
      };
    },

    showInfoWindow(item) {
      if (item) {
        this.showPopup = true;
        // this.curProjectId = item.id;
      } else {
        this.showPopup = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.thePage {
  width: 100%;
  height: 100%;
}
.myMap {
  width: 100%;
  height: 100%;
}
</style>
